<template>
  <div :class="prefixCls">
    <div ref="editor" class="editor-wrapper"></div>
    <storage-select :id="editor_id" :hiddenInput="true" selectNum="20" type="image" @onOk="onStorageSelectOk">
    </storage-select>
    <a-modal :visible="$store.getters.www_img_modal" title="插入网络图片" @cancel="onWwwImgCancel" @ok="onWwwImgOk">
      <a-input placeholder="请输入图片地址" v-model.trim="imgUrl" />
    </a-modal>
    <storage-select :id="editor_id +'video'" :hiddenInput="true" type="video" @onOk="onStorageVideoSelectOk">
    </storage-select>
    <a-modal :visible="$store.getters.www_video_modal" title="插入网络视频" @cancel="onWwwVideoCancel" @ok="onWwwVideoOk">
      <a-input placeholder="请输入视频地址" v-model.trim="videoUrl" />
    </a-modal>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import WEditor from 'wangeditor'

export default {
  name: 'WangEditor',
  props: {
    prefixCls: {
      type: String,
      default: 'ant-editor-wang'
    },
    // eslint-disable-next-line
    value: {
      type: String,
      default: ''
    },
    // 自动focus
    autoFocus: {
      type: Boolean,
      default: false
    },
    // 编辑区域高度
    height: {
      type: Number,
      default: 300
    },
    // placeholder
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    zIndex: {
      type: Number,
      default: 500
    }
  },
  data () {
    return {
      editor: null,
      editorContent: '',
      imgUrl: '',
      videoUrl: ''
    }
  },
  watch: {
    value: {
      handler (val) {
        this.$nextTick(() => {
          const content = val.trim()
          this.editorContent = content
          this.editor.txt.html(content)
        })
      },
      immediate: true
    }
  },
  mounted () {
    this.initEditor()
  },
  computed: {
    editor_id: function () {
      return this.editor ? this.editor.id : 0
    }
  },
  methods: {
    ...mapActions(['showWwwImgModal', 'hiddenWwwImgModal', 'showWwwVideoModal', 'hiddenWwwVideoModal']),
    initEditor () {
      const editor = new WEditor(this.$refs.editor)
      editor.config.focus = this.autoFocus
      editor.config.height = this.height
      editor.config.placeholder = this.placeholder
      editor.config.zIndex = this.zIndex
      editor.config.excludeMenus = ['fontName', 'todo', 'code', 'video', 'image', 'table']
      editor.config.customAlert = (s, t) => {
        switch (t) {
          case 'success':
            this.$message.success(s)
            break
          case 'info':
            this.$message.info(s)
            break
          case 'warning':
            this.$message.warning(s)
            break
          case 'error':
            this.$message.error(s)
            break
          default:
            this.$message.info(s)
            break
        }
      }
      editor.config.onchange = (html) => {
        html = html.replace(/<img src=/g, '<img style="max-width:100%;" src=')
        this.editorContent = html.trim()
        this.$emit('change', this.editorContent)
      }
      editor.config.showFullScreen = false
      editor.create()
      this.editor = editor
    },
    onStorageSelectOk: function (urls) {
      for (let i = 0; i < urls.length; i++) {
        let html = '<p><img style="max-width: 100%" src="' + urls[i] + '" /></p>'
        this.editor.cmd.do('insertHTML', html)
      }
    },
    onStorageVideoSelectOk: function (urls) {
      const html = `<video src="${urls}" controls="controls" style="width:100%">您的浏览器不支持 video 标签。</video>`
      this.editor.cmd.do('insertHTML', html)
    },
    onWwwImgOk: function () {
      if (this.imgUrl === '') {
        this.$message.warning('图片地址不能为空')
        return
      }
      const html = '<p><img src="' + this.imgUrl + '" style="max-width: 100%" /></p>'
      this.editor.cmd.do('insertHTML', html)
      this.hiddenWwwImgModal()
    },
    onWwwImgCancel: function () {
      this.hiddenWwwImgModal()
    },
     onWwwVideoOk: function () {
      if (this.videoUrl === '') {
        this.$message.warning('视频地址不能为空')
        return
      }
      const html = `<video src="${this.videoUrl}" controls="controls" style="width:100%">您的浏览器不支持 video 标签。</video>`
      this.editor.cmd.do('insertHTML', html)
      this.hiddenWwwVideoModal()
    },
    onWwwVideoCancel: function () {
      this.hiddenWwwVideoModal()
    }
  }
}
</script>

<style>
.ant-editor-wang .w-e-menu-tooltip-up {
  z-index: 10003 !important;
}
.ant-editor-wang .w-e-toolbar {
  border-color: #d9d9d9 !important;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.ant-editor-wang .w-e-text-container {
  border-color: #d9d9d9 !important;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  height: 800px !important;
}
</style>
<style lang="less" scoped>
.ant-editor-wang {
  .editor-wrapper {
    text-align: left;
  }
}
</style>
